<template>
    <div class="app-container">
        <el-form :model="searchdata" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <!-- <el-form-item label="客资id" prop="kzid">
                <el-input v-model="searchdata.kzId" placeholder="请输入客资id" clearable  onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" @keyup.enter.native="handleQuery"
                    style="width: 135px;" />
            </el-form-item> -->
            <el-form-item label="姓名" prop="kzName">
                <el-input v-model="searchdata.kzName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery"
                    style="width: 135px;" />
            </el-form-item>
            <el-form-item label="手机号" prop="kzTel">
                <el-input v-model="searchdata.kzTel" placeholder="请输入手机号" clearable style="width: 135px;"
                    onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="微信号" prop="kzwechat">
                <el-input v-model="searchdata.kzWechat" placeholder="请输入微信号" clearable style="width: 135px;"
                    onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g,'')" @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item label="服务种类" prop="serveType">
                <el-select v-model="searchdata.serveType" placeholder="服务种类" clearable style="width: 135px">
                    <el-option v-for="dict in serveType" :key="dict.key" :label="dict.label" :value="dict.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="预计婚期" prop="kzWedding">
                <el-select v-model="searchdata.kzWedding" placeholder="预计婚期" clearable style="width: 135px">
                    <el-option v-for="dict in kzWedding" :key="dict.key" :label="dict.label" :value="dict.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="申请时间">
                <el-date-picker v-model="searchdata.startTime" type="date" value-format="timestamp"
                    :picker-options="startDatePicker" placeholder="开始时间" style="width: 135px">
                </el-date-picker>
                <el-date-picker v-model="endTimes" type="date" value-format="timestamp" :picker-options="endDatePicker"
                    placeholder="结束时间" style="width: 135px">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="取消状态" prop="typeid">
                <el-select v-model="searchdata.typeid" placeholder="取消状态" clearable style="width: 135px">
                    <el-option v-for="dict in typeid" :key="dict.key" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="backList">
            <el-table-column label="客资id" align="center" prop="kzid" />
            <el-table-column label="订单编号" align="center" prop="kzResource" />
            <el-table-column label="姓名" align="center" prop="kzName" />
            <el-table-column label="手机号" align="center" prop="kzTel" />
            <el-table-column label="微信号" align="center" prop="kzWechat" />
            <el-table-column label="服务种类" align="center" prop="serveType" />
            <el-table-column label="来源" align="center" prop="kzFrom" />
            <el-table-column label="预计婚期" align="center" prop="kzWedding" />
            <el-table-column label="申请商家名称" align="center" prop="shopname" />
            <el-table-column label="申请时间" align="center" prop="changetime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.changetime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请原因" align="center" prop="msg">
                <template slot-scope="scope">{{ scope.row.msg || '暂无' }}</template>
            </el-table-column>
            <el-table-column label="锁单金额" align="center" prop="suodanmoney">
                <template slot-scope="scope">{{ scope.row.suodanmoney || '暂无' }}</template>
            </el-table-column>
            <el-table-column label="成交金额" align="center" prop="chengjiaomoney">
                <template slot-scope="scope">{{ scope.row.chengjiaomoney || '暂无' }}</template>
            </el-table-column>
            <el-table-column label="取消状态" align="center" prop="typeid">
                <template slot-scope="scope">
                    <span v-if="scope.row.typeid == 6">待审核</span>
                    <span v-else-if="scope.row.typeid == 8">取消成功</span>
                    <span v-else-if="scope.row.typeid == 9">取消驳回</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- v-hasPermi="['system:user:edit']" -->
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="shenhe(scope.row)"
                        v-hasPermi="['kuser:cancelorder:shenhe']" v-if="scope.row.typeid == 6">审核</el-button>
                    <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="xiangqing(scope.row)">详情</el-button> -->
                    <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                        <span class="el-dropdown-link">
                            <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <!-- v-hasPermi="['system:user:edit']" -->
                            <el-dropdown-item v-hasPermi="['kuser:cancelorder:shopinfo']"
                                command="cancelbusinessInformation" icon="el-icon-circle-check">商家信息
                            </el-dropdown-item>
                            <el-dropdown-item v-hasPermi="['kuser:cancelorder:kzinfo']" command="cancelkeziInformation"
                                icon="el-icon-circle-check">客资信息
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="searchdata.pageNum" :limit.sync="searchdata.pageSize"
            @pagination="getList" />
        <!-- 审核详情 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDialog">
            <el-form :model="form" ref="form" :rules="rules" size="small" :inline="true" label-width="100px">
                <el-form-item label="客资姓名" prop="kzName" style="width:400px">
                    <el-input v-model="form.kzName" placeholder="请输入客资姓名" :disabled="edit" />
                </el-form-item>
                <el-form-item label="手机号" prop="kzTel">
                    <el-input maxlength="11" v-model="form.kzTel" placeholder="请输入联系方式" :disabled="edit" />
                </el-form-item>
                <el-form-item label="微信号" prop="kzWechat" style="width:400px">
                    <el-input v-model="form.kzWechat" placeholder="请输入微信号" :disabled="edit" />
                </el-form-item>
                <el-form-item label="来源" prop="kzFrom">
                    <el-input v-model="form.kzFrom" placeholder="请输入来源" :disabled="edit" />
                </el-form-item>
                <el-form-item label="录入员工" prop="upusername" style="width:400px">
                    <el-input v-model="form.upusername" placeholder="请输入客资姓名" :disabled="edit" />
                </el-form-item>
                <el-form-item label="服务种类" prop="serveType">
                    <el-input v-model="form.serveType" placeholder="请输入服务种类" :disabled="edit" />
                </el-form-item>
                <el-form-item label="预计婚期" prop="kzWedding" style="width:400px">
                    <el-input v-model="form.kzWedding" placeholder="请输入预计婚期" :disabled="edit" />
                </el-form-item>
                <el-form-item label="服务城市1" prop="kzWantcity" clearable>
                    <el-cascader size="large" ref="cascader" :options="options" v-model="selectedOptions" :disabled="edit"
                        style="width:194px" :props="defaultParams">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="服务城市2" prop="kzWantcity1" clearable style="width:400px">
                    <el-cascader size="large" ref="cascader" :options="options" :props="defaultParams" :disabled="edit"
                        style="width:194px" v-model="selectedOptions1">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="服务城市3" prop="kzWantcity2" clearable>
                    <el-cascader size="large" ref="cascader" :options="options" :props="defaultParams" :disabled="edit"
                        style="width:194px" v-model="selectedOptions2">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="申请商家" prop="shopname" style="width:400px">
                    <el-input v-model="form.shopname" placeholder="请输入申请商家" :disabled="edit" />
                </el-form-item>
                <el-form-item label="取消原因" prop="msg">
                    <el-input v-model="form.msg" placeholder="请输入退回原因" type="textarea" disabled style="width: 194px">
                    </el-input>
                </el-form-item>
                <el-form-item label="退单凭证" prop="img" style="width: 400px;">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        list-type="picture" name="fileName">
                        <el-button size="small" type="primary" disabled>点击上传</el-button>
                        <template #tip>
                            <ul class="el-upload-list el-upload-list--picture show" style="width:194px">
                                <li v-for="(item, index) in fileList" class="el-upload-list__item is-success" tabindex="0">
                                    <el-image style="cursor: pointer;" :preview-src-list="srcList_s"
                                        @click="looks(item.url)" class="el-upload-list__item-thumbnail" :src="item.url">
                                    </el-image>
                                    <a class="el-upload-list__item-name">
                                        <i class="el-icon-document"></i>
                                        {{ item.name }}
                                    </a>
                                    <label class="el-upload-list__item-status-label">
                                        <i class="el-icon-upload-success el-icon-check"></i>
                                    </label>
                                </li>
                            </ul>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" disabled style="width: 194px">
                    </el-input>
                </el-form-item>
                <el-form-item label="订单取消审核" style="width: 400px;">
                    <template>
                        <el-radio-group v-model="form.type">
                            <el-radio :label="0">同意退回</el-radio>
                            <el-radio :label="1">驳回</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="驳回原因" prop="bohui" v-if="form.type == '1'">
                    <el-input v-model="form.bohui" placeholder="请输入驳回原因" type="textarea" clearable style="width: 194px">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" :disabled="lock" @click="submitshenhe()">提交审核
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { selectAllqxdd, updateQXDD } from "@/api/kuser/cancelorder.js";
import allData from '@/api/kuser/level-data.js';
import { getToken } from '@/utils/auth'
export default {
    name:'Cancelorder',
    data() {
        return {
            lock:false,
            endTimes: '',
            defaultParams: {
                value: "name", //设置默认值value
                label: "name", //设置显示的是什么
                children: "children" //设置子元素数组是啥
            },
            edit: true,
            typeid: [{ value: '6', label: '待审核' }, { value: '8', label: '取消成功' }, { value: '9', label: '取消驳回' }],
            kzFrom: [{
                key: '1',
                label: '自主留资'
            }, {
                key: '2',
                label: '手动留资'
            }, {
                key: '3',
                label: '分享留资'
            }, {
                key: '4',
                label: '后台录入'
            }, {
                key: '5',
                label: '异业录入'
            }],
            serveType: [{
                key: '1',
                label: '婚纱礼服'
            }, {
                key: '2',
                label: '婚礼策划'
            }, {
                key: '3',
                label: '婚宴酒店'
            }, {
                key: '4',
                label: '婚纱摄影'
            }],
            kzWedding: [{
                key: '1',
                label: '三个月内'
            }, {
                key: '2',
                label: '半年内'
            }, {
                key: '3',
                label: '一年内'
            }, {
                key: '4',
                label: '一年以上/婚期未定'
            }, {
                key: '5',
                label: '无'
            }],
            showSearch: true,
            searchdata: {
                kzId:'',
                kzWechat:'',
                kzName: '',
                kzTel: '',
                serveType: '',
                kzWedding: '',
                startTime: '',
                endTime: '',
                typeid: '',
                pageNum: 1,
                pageSize: 10,
            },
            backList: [],
            open: false,
            title: '',
            // 遮罩层
            loading: true,
            total: 0,
            selectedOptions: [],
            selectedOptions1: [],
            selectedOptions2: [],
            options: allData,
            form: {
                kzName: '',
                kzTel: '',
                kzWechat: '',
                kzFrom: '',
                serveType: '',
                kzWedding: '',
                shopname: '',
                kzId: '',
                shopid: '',
                type: 0,
                msg: '',
                upusername: '',
                remark: '',
                bohui: '',
                img: '',
                idd_idd: ''
            },
            rules: {
                msg: [{ required: true, message: "退回原因不能为空", trigger: "blur" }],
                bohui: [{ required: true, message: "驳回原因不能为空", trigger: "blur" }]
            },
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
            tipShow: false,
            url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            fileList: [],
            srcList_s: [],
        }
    },
    created() {
        this.getList();
        this.selectedOptions = allData;
    },
    methods: {
        closeDialog() {
            this.form = {
                kzName: '',
                kzTel: '',
                kzWechat: '',
                kzFrom: '',
                serveType: '',
                kzWedding: '',
                shopname: '',
                kzId: '',
                shopid: '',
                type: 0,
                msg: '',
                remark: '',
            }
        },
        // 获取列表
        async getList() {
            let res = await selectAllqxdd(this.searchdata);
            if (res.code == 200) {
                this.backList = res.rows;
                this.loading = false;
                this.total = res.total;
            }
        },
        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                case "cancelkeziInformation":
                    this.cancelkeziInformation(row);
                    break;
                case "cancelbusinessInformation":
                    this.cancelbusinessInformation(row);
                    break;
                default:
                    break;
            }
        },
        //取消订单申请客资信息
        cancelkeziInformation: function (row) {
            this.$router.push({
                name: "cancelkeziInformation",
                query: { kzId: row.kzid, shopid: row.shopid }
            })
        },
        //取消订单申请商家信息
        cancelbusinessInformation: function (row) {
            this.$router.push({
                name: "cancelbusinessInformation",
                query: { kzId: row.kzid, shopid: row.shopid }
            })
        },
        // 审核
        shenhe(row) {
            if (this.tipShow == true) {
                this.$message({
                    message: '正在审核,请耐心等待',
                    type: 'warning'
                });
            } else {
                this.open = true;
            }
            this.title = "审核";
            this.form.shopid = row.shopid;
            this.form.kzId = row.kzid;
            this.form.kzName = row.kzName;
            this.form.kzTel = row.kzTel;
            this.form.kzWechat = row.kzWechat;
            this.form.kzFrom = row.kzFrom;
            this.form.serveType = row.serveType;
            this.form.kzWedding = row.kzWedding;
            this.form.shopname = row.shopname;
            this.form.upusername = row.upusername;
            this.form.idd_idd = row.id;
            if (row.wantcity != '') {
                let aa = row.wantcity.split(',');
                if (aa[0] != undefined) {
                    let city = aa[0];
                    let reg = /.+?(省|市|自治区|自治州|县|区)/g;
                    let citys = city.match(reg);
                    if (citys[0] != undefined && citys[1] != undefined && citys[2] != undefined) {
                        this.selectedOptions = [citys[0], citys[1], citys[2]];
                    } else if (citys[0] != undefined && citys[1] != undefined && citys[2] == undefined) {
                        this.selectedOptions = [citys[0], citys[1], '全部'];
                    } else if (citys[0] != undefined && citys[1] == undefined && citys[2] == undefined) {
                        this.selectedOptions = [citys[0], '全部', '全部'];
                    }
                } else {
                    this.selectedOptions = [];
                }
                if (aa[1] != undefined) {
                    let city1 = aa[1];
                    let reg = /.+?(省|市|自治区|自治州|县|区)/g;
                    let citys1 = city1.match(reg);
                    if (citys1[0] != undefined && citys1[1] != undefined && citys1[2] != undefined) {
                        this.selectedOptions1 = [citys1[0], citys1[1], citys1[2]];
                    } else if (citys1[0] != undefined && citys1[1] != undefined && citys1[2] == undefined) {
                        this.selectedOptions1 = [citys1[0], citys1[1], '全部'];
                    } else if (citys1[0] != undefined && citys1[1] == undefined && citys1[2] == undefined) {
                        this.selectedOptions1 = [citys1[0], '全部', '全部'];
                    }
                } else {
                    this.selectedOptions1 = [];
                }
                if (aa[2] != undefined) {
                    let reg = /.+?(省|市|自治区|自治州|县|区)/g;
                    let city2 = aa[2];
                    let citys2 = city2.match(reg);
                    if (citys2[0] != undefined && citys2[1] != undefined && citys2[2] != undefined) {
                        this.selectedOptions2 = [citys2[0], citys2[1], citys2[2]];
                    } else if (citys2[0] != undefined && citys2[1] != undefined && citys2[2] == undefined) {
                        this.selectedOptions2 = [citys2[0], citys2[1], '全部'];
                    } else if (citys2[0] != undefined && citys2[1] == undefined && citys2[2] == undefined) {
                        this.selectedOptions2 = [citys2[0], '全部', '全部'];
                    }
                } else {
                    this.selectedOptions2 = [];
                }
            } else {
                this.form.wantcity = '';
            }
            if (row.img == '') {
                this.fileList = []
            } else {
                let aa = row.img.split(',');
                this.fileList = this.fileList.push(aa);
                let List = [];
                aa.forEach((item) => {
                    let object = {
                        url: ''
                    }
                    object.url = item;
                    List.push(object);
                    this.fileList = List
                })
            }
            this.form.img = row.img;
            this.form.msg = row.msg
            this.form.remark = row.remark
        },
        // 提交审核
        submitshenhe() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.tipShow = true;
                    this.form.remark = this.form.bohui;
                    this.form.bohui = '';
                    this.lock=true;
                    updateQXDD(this.form).then(response => {
                        if (response.data.code == 200) {
                            this.lock=false;
                            this.tipShow = false;
                            this.$modal.msgSuccess(response.data.msg);
                            this.form = {
                                kzId: '',
                                shopid: '',
                            }
                            this.form.msg = "";
                            this.getList();
                            this.open = false;
                        }else{
                            this.lock=false;
                            this.$modal.msgError(response.data.msg);
                        }
                    })
                }
            })
        },
        // 搜索
        handleQuery() {
            if (this.searchdata.startTime == '' && this.endTimes == "") {
                selectAllqxdd(this.searchdata).then(response => {
                    if (response.code == 200) {
                        this.backList = response.rows;
                        this.total = response.total;
                    }
                })
            } else if (this.searchdata.startTime == "" && this.endTimes != '') {
                this.$modal.msgError("请输入开始时间");
            } else if (this.searchdata.startTime != '' && this.endTimes == '') {
                this.$modal.msgError("请输入结束时间");
            } else if (this.searchdata.startTime != '' && this.endTimes != '' && this.searchdata.startTime > this.endTimes) {
                this.$modal.msgError("结束时间必须大于开始时间");
            } else if (this.searchdata.startTime != '' && this.endTimes != '' && this.searchdata.startTime < this.endTimes) {
                this.searchdata.endTime = this.endTimes + 24 * 60 * 60 * 1000 - 1;
                selectAllqxdd(this.searchdata).then(response => {
                    if (response.code == 200) {
                        this.backList = response.rows;
                        this.total = response.total;
                    }
                })
            } else if (this.queryParams.startTime == this.queryParams.endTime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            }
        },
        resetQuery() {
            this.searchdata = {
                kzName: '',
                kzTel: '',
                serveType: '',
                kzWedding: '',
                startTime: '',
                endTime: '',
                typeid: '',
                kzId:'',
                kzWechat:'',
                // minmoney: '',
                // maxmoney: ''
            },
                this.endTimes = "";
            this.getList();
        },
        // 验证搜索框日期
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                    //           debugger;
                    if (self.endTime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endTime).getTime() < time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.startTime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.startTime).getTime() > time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        looks(url) {
            this.srcList_s.push(url)
        },
    }
}
</script>